<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="public/vendor/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="public/vendor/bootstrap-material-design/dist/css/ripples.min.css">
    <link rel="stylesheet" href="public/vendor/bootstrap-material-design/dist/css/material.min.css">
    <!-- build:css style/app.min.css -->
    <link rel="stylesheet" href="public/style/main.css">
    <script src="/public/js/vconsole.min.js"></script>

    <!-- endbuild -->
    <!-- <link rel="localization" href="locales/manifest.json"> -->

    <!-- build:js js/app.min.js -->
    <!-- <script defer src="vendor/l20n/l20n.min.js"></script> -->
    <!-- endbuild -->
    <script>
      // const vconsole=new VConsole()
    </script>
    <title>Webby Mouse</title>
  </head>
  <body>
    <div id="fullscreen-toggle"></div>
    <header class="navbar navbar-inverse navbar-fixed-top shadow-z-2" role="navigation" hidden>
      <div class="navbar-header" style="width:30px">
        <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#pushMenu">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <!-- <i class="mdi-navigation-menu"></i> -->
        </button>
        <!-- <a class="navbar-brand" href="#" data-l10n-id="projectName">Webby Mouse</a> -->
      </div>
      <div class="collapse navbar-collapse" id="pushMenu">
        <ul class="nav navbar-nav">
          <li id="touch-ctrl" class="active">
            <a href="#"><i class="mdi-hardware-mouse"></i> Touch Control</a>
          </li>
          <li id="motion-ctrl">
            <a href="#"><i class="mdi-maps-my-location"></i> Motion Control</a>
          </li>
          <li id="present-ctrl">
            <a href="#"><i class="mdi-image-collections"></i> Presentation Control</a>
          </li>
          <li class="divider"></li>
          <li>
            <div class="togglebutton">
            <label class="navbar-item">
            <input type="checkbox" name="checkbox" id="fullscreen-toggle2" autocomplete="off"></input>
            Fullscreen <span class="toggle pull-right"></span>
            </label>
            </div>
          </li>
          <li class="hidden" id="portrait">
            <a href="#">
            <i class="mdi-communication-stay-current-portrait"></i> Portrait
            </a>
          </li>
          <li class="hidden" id="landscape">
            <a href="#">
              <i class="mdi-communication-stay-current-landscape"></i> Landscape
            </a>
          </li>
          <li class="divider"></li>
          <li><a href="#" id="passcode"><i class="mdi-notification-vpn-lock"></i> Pass Code</a></li>
          <li class="divider"></li>
          <li><a href="#" id="about">About</a></li>
        </ul>
      </div>
    </header>
    <div class="touchpad" id="touchpad"></div>
    <script defer src="/public/vendor/jquery/dist/jquery.min.js"></script>
    <script defer src="/public/vendor/bootstrap/dist/js/bootstrap.min.js"></script>
    <script defer src="/public/vendor/bootstrap-material-design/dist/js/ripples.min.js"></script>
    <script defer src="/public/vendor/bootstrap-material-design/dist/js/material.min.js"></script>
    <script defer src="/socket.io/socket.io.js"></script>
    <script defer src="/public/vendor/hammerjs/hammer.min.js"></script>
    <!-- mouse client -->
    <script defer src="/public/js/client.js"></script>
  </body>
</html>

